Debugging UIWebView content in a MonoTouch app

Desktop browsers have great support for diagnosing rendering issues or scripting bugs.

But what are you supposed to do if you're developing an iPhone or iPad app, and you need to debug web content hosted inside a UIWebView control?

It turns out that you can use desktop Safari to "remotely" inspect mobile Safari when its running in the iOS Simulator. Happy days!

To pull this off your app has to call a private API, or at least it does in iOS 5.1 - hopefully Apple will expose this API "properly" at some point.

If you want to see how to do this in Objective-C head over to Nathan de Vries' post. If you prefer writing iOS apps in C# here's what to do:

First add the following method to your AppDelegate class:

[Conditional("DEBUG")]
private static void EnableUIWebViewRemoteInspector()
{
    var webViewClass = Class.GetHandle("WebView");
    var selector = Selector.GetHandle("_enableRemoteInspector");

    Messaging.void_objc_msgSend(webViewClass, selector);
}

You'll notice that EnableUIWebViewRemoteInspector() is conditionally compiled into DEBUG builds only. Your app will most likely be rejected by Apple if you submit it with calls to private APIs, so make sure you submit a RELEASE build and/or remove EnableUIWebViewRemoteInspector() once you're done debugging.

Next call the new method from your AppDelegate's FinishedLaunching method:

public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{   
    EnableUIWebViewRemoteInspector();   
    return true;
}

That's it!

To try it out: fire up your app in the iOS Simulator and browse to http://localhost:9999 using desktop Safari (the remote inspector doesn't work properly in Chrome or Firefox).

You'll be presented with a list of pages you can inspect. When you pick one this is what you should see: